<template>
  <transition name="room" appear>
    <div class="enter_animation">
      <div class="bg">
        <img src="../../../assets/image/gif/roomBG.gif" alt="bg">
      </div>
      <div class="loading">
        <div class="out_box">
          <div class="in_box"></div>
        </div>
        <div class="text">
          <span>{{message}}</span>
        </div>
      </div>
    </div>
  </transition>
</template>

<script>
export default {
  name: 'Enteranimation',

  data() {
    return {
      
    };
  },

  props: {
    // 动画提示信息
    message: String
  }
};
</script>

<style scoped>
.enter_animation{
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  width: 100vw;
  height: 100vh;
  background-color: rgb(102, 206, 255);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-top: 100px;
}
.loading{
  width: 40%;
}
.loading .out_box{
  width: 100%;
  height: 30px;
  border: 1px solid gray;
  box-shadow: 0 0 4px gray;
  border-radius: 20px;
  overflow: hidden;
}
.loading .in_box{
  width: 100%;
  height: 30px;
  background-image: linear-gradient(to top,rgb(195, 0, 255),rgb(120, 1, 255),blue);
  border-radius: 20px;
  animation: loading 5s cubic-bezier(.815, .610, .355, 1) 1;
}
.loading .text{
  margin: 10px;
  text-align: center;
  font-weight: bold;
  color: white;
}
.loading .text span:last-child{
  letter-spacing: 5px;
  margin-left: 4px;
}
.room-leave{
  opacity: 1;
}
.room-leave-active{
  transition: all .3s ease;
}
.room-leave-to{
  opacity: 0;
}
@keyframes loading {
  from{
    margin-left: -100%;
  }
  to{
    margin-left: 0%;
  }
}
</style>